<script lang="ts">
	import DownIcon from '$lib/components/icons/ChevronDown.svelte';
	export let open = false;
	export let title: string;
	export let content: string;

  let _open = open;

</script>

<div>
	<div>
		<button
			class="text-sm bg-black/20 px-2 py-1 rounded flex justify-center gap-x-1"
			on:click={() => {
				_open = !_open;
			}}
		>
			<span>{title}</span>
      <DownIcon className={_open ? "rotate-180 size-4" : "size-4"} />
		</button>
	</div>
	{#if _open}
		<div class="my-1 text-sm p-2 bg-white/15 rounded">{content}</div>
	{/if}
</div>
